import React from 'react';
import { Row, Col, Card, Statistic, Space, Button } from 'antd';

const DroneControl: React.FC = () => {
  return (
    <div className="p-6">
      <Row gutter={[16, 16]} className="mb-6">
        <Col span={6}>
          <Card>
            <Statistic title="飞行状态" value="巡航中" />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic title="当前高度" value={120} suffix="m" />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic title="飞行速度" value={15.5} suffix="m/s" />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic title="电池电量" value={85} suffix="%" />
          </Card>
        </Col>
      </Row>
      <Row gutter={[16, 16]}>
        <Col span={16}>
          <Card title="实时飞行轨迹" className="h-[500px]">
            <div className="flex flex-col h-full">
              <div className="flex-1 bg-gray-100 rounded-lg mb-4" style={{ backgroundImage: 'url(https://mastergo.com/ai/api/search-image?query=aerial view of a modern city with streets and buildings shown from above, featuring a dynamic flight path visualization with clean minimalist style, soft pastel colors, perfect for a drone control interface background&width=800&height=400&orientation=landscape&flag=6d9fa85762b6d12b0545f4765cf103a3)', backgroundSize: 'cover', backgroundPosition: 'center' }}>
              </div>
              <Space className="justify-center w-full">
                <Button type="primary" icon={<i className="fas fa-plane-departure"/>} className="rounded-button-special whitespace-nowrap">起飞</Button>
                <Button type="default" icon={<i className="fas fa-land"/>} className="rounded-button-special whitespace-nowrap">降落</Button>
                <Button type="default" icon={<i className="fas fa-pause"/>} className="rounded-button-special whitespace-nowrap">悬停</Button>
                <Button type="default" icon={<i className="fas fa-home"/>} className="rounded-button-special whitespace-nowrap">返航</Button>
                <Button danger icon={<i className="fas fa-stop"/>} className="rounded-button-special whitespace-nowrap">紧急停止</Button>
              </Space>
            </div>
          </Card>
        </Col>
        <Col span={8}>
          <Card title="无人机控制面板" className="h-[500px]">
            <div className="space-y-4">
              <div>
                <div className="mb-2 font-medium">飞行高度调节 (m)</div>
                <Space className="w-full justify-between items-center">
                  <Button icon={<i className="fas fa-minus"/>} className="rounded-button-special"/>
                  <span className="text-lg font-medium">120m</span>
                  <Button icon={<i className="fas fa-plus"/>} className="rounded-button-special"/>
                </Space>
              </div>
              <div>
                <div className="mb-2 font-medium">飞行速度调节 (m/s)</div>
                <Space className="w-full justify-between items-center">
                  <Button icon={<i className="fas fa-minus"/>} className="rounded-button-special"/>
                  <span className="text-lg font-medium">15.5m/s</span>
                  <Button icon={<i className="fas fa-plus"/>} className="rounded-button-special"/>
                </Space>
              </div>
              <div>
                <div className="mb-2 font-medium">航向控制</div>
                <div className="grid grid-cols-3 gap-2 w-full">
                  <div></div>
                  <Button icon={<i className="fas fa-arrow-up"/>} className="rounded-button-special"/>
                  <div></div>
                  <Button icon={<i className="fas fa-arrow-left"/>} className="rounded-button-special"/>
                  <Button icon={<i className="fas fa-dot-circle"/>} className="rounded-button-special"/>
                  <Button icon={<i className="fas fa-arrow-right"/>} className="rounded-button-special"/>
                  <div></div>
                  <Button icon={<i className="fas fa-arrow-down"/>} className="rounded-button-special"/>
                  <div></div>
                </div>
              </div>
              <div>
                <div className="mb-2 font-medium">云台控制</div>
                <div className="grid grid-cols-3 gap-2">
                  <Button icon={<i className="fas fa-camera"/>} className="rounded-button-special whitespace-nowrap">拍照</Button>
                  <Button icon={<i className="fas fa-video"/>} className="rounded-button-special whitespace-nowrap">录像</Button>
                  <Button icon={<i className="fas fa-sync"/>} className="rounded-button-special whitespace-nowrap">校准</Button>
                </div>
              </div>
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default DroneControl; 